import React from 'react';

import bgImg from '../images/adabg-02-02.png';
import top1Img from '../images/1-01.png';
import top2Img from '../images/2-01.png';
import top3Img from '../images/3-01.png';
import top4Img from '../images/4-01.png';
import top5Img from '../images/5-01.png';
import top6Img from '../images/6-01.png';
import top7Img from '../images/7-01.png';
import Channels from '../components/channels';
import { hashHistory } from 'react-router';
import { connect } from 'react-redux';

import { conference, initConference } from '../actions/conference';

const Height = 2226;
const Width = 1333;

class EASDPage extends React.Component {
    constructor() {
        super();
        this.state = {
            id: "",
            year: ""
        }
    }
    
    orientationChange() {
        this.forceUpdate();
    }

    componentDidMount() {
        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    componentWillUnmount() {
        window.removeEventListener("onorientationchange" in window ? "orientationchange" : "resize", this.orientationChange.bind(this), false); 
    }

    displayChannels(id, year) {
        let allButton = document.querySelectorAll(".easdchannel") || [];
        for(let i = 0; i< allButton.length; i++) {
            if (allButton[i].style.display == "block" && allButton[i].id!=(id+year)) 
                allButton[i].style.display = "none";
        }
        this.props.initConference();
        this.props.conference(id, year);
        this.setState({
            id: id,
            year: year
        });
        let targetDiv = document.getElementById(id+year);
        if (targetDiv != null )
            if (targetDiv.style.display == "none") {
                targetDiv.style.display = "block";
                const heightSize = Math.max(Height * widthSize,document.body.scrollHeight) ;
                let parentDiv = document.getElementById('conference');
                parentDiv.style.height = heightSize + "px";
            } else {
                targetDiv.style.display = "none";
                const heightSize = Math.max(Height * widthSize,document.body.clientHeight) ;
                let parentDiv = document.getElementById('conference');
                parentDiv.style.height = heightSize + "px";
            }
    }
    handleSwitchChannel(channelId) {
        hashHistory.push('conference/list/'+channelId+'/1');
    }
    render() {

        const widthSize = document.body.clientWidth / Width;
        const heightSize = Math.max(Height * widthSize,document.body.clientHeight) ;  

        let channels=this.props.channels;
        let styles = {};
        if (channels) {
            let line = channels.length/4 > 1 ? channels.length/4 : 1;
            styles = {
                channels: {
                    height: (7 * line) + "rem",
                },
                channel: {
                    width:"calc(100% / 4)", 
                    float: "left", 
                    textAlign:"center", 
                    paddingTop: "0.5rem",
                    fontSize: "0.7rem"
                },
                channelImg: {
                    backgroundSize: "3rem 3rem",
                    width:"3rem",
                    height:"3rem",
                    margin:"auto",
                    borderRadius:"50%"
                }
            }
        }
        return(
            <div id="conference" style={{backgroundImage:"url("+bgImg+")",backgroundSize:"100% 100%",top: "0px",position: "absolute", height:heightSize}}>
                <div>
                    <img src={top1Img} style={{ width: "100%", height: "100%", display: "block" }}/>
                </div>
                <div>
                    <div style={{ marginTop: "0px" }}>
                        <div onTouchStart={() => this.displayChannels("EASD","2015")}>
                            <img src={top2Img} style={{ width: "100%", height: "100%", display: "block" }}/>
                        </div>
                        <div className="easdchannel" id="EASD2015" style={{display:"none", backgroundColor:"#fff"}}>
                            <Channels styles={styles} channels={ channels } handleSwitchChannel={this.handleSwitchChannel.bind(this)}/>
                        </div>
                        <div onTouchStart={() => this.displayChannels("EASD","2016")}>
                            <img src={top3Img} style={{ width: "100%", height: "100%", display: "block" }}/>
                        </div>
                        <div className="easdchannel" id="EASD2016" style={{display:"none", backgroundColor:"#fff"}}>
                            <Channels styles={styles} channels={ channels } handleSwitchChannel={this.handleSwitchChannel.bind(this)}/>
                        </div>
                        <div>
                            <img src={top4Img} style={{ width: "100%", height: "100%", display: "block" }}/>
                        </div>
                        <div>
                            <img src={top5Img} style={{ width: "100%", height: "100%", display: "block" }}/>
                        </div>
                        <div>
                            <img src={top6Img} style={{ width: "100%", height: "100%", display: "block" }}/>
                        </div>
                        <div>
                            <img src={top7Img} style={{ width: "100%", height: "100%", display: "block" }}/>
                        </div>
                    </div>
                </div>
            </div>
            
            )
    }
}

function mapStateToProps(state){
    return { 
        channels: state.conference.channels
    };
}

export default connect(mapStateToProps, { conference, initConference })(EASDPage);